<template>
  <div class="contain">
    <p class="sh">我的购物车</p>
    <span class="sh1">(共{{totalnum}}件商品)</span>
    <p>
      <input type="checkbox" class="tui-checkbox" :checked="ischecked" @click="changeall">全选
    </p>
    <p class="sh2">已选{{selectnum}}件商品</p>
    <div class="goodslist">
      <div v-for="item in list" :key="item.id">
        <van-swipe-cell>
          <van-checkbox v-model="item.ischecked"></van-checkbox>
          <van-card
            :num="item.goodsbuynum"
            :price="item.goodsprice"
            :desc="item.goodsname"
            :thumb="item.goodsimg"
          >
            <template #footer>
              <van-button size="mini" @click="calc(item.id,item.goodsbuynum,1)">+</van-button>
              <van-button
                size="mini"
                v-if="item.goodsbuynum>1"
                @click="calc(item.id,item.goodsbuynum,-1)"
              >-</van-button>
              <van-button size="mini" v-else>-</van-button>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="dell(item.id)"
            />
            <!-- //@click="dell(item.id)" -->
          </template>
        </van-swipe-cell>
      </div>
      <!-- :price="price*100" -->
      <van-submit-bar :price="price*100" button-text="去结算" @submit="gotOrder"/>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.goodslist {
  margin-bottom: 54px;
}
.tui-checkbox:checked {
  background: #1673ff;
}
.tui-checkbox {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: solid 1px #dddddd;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.6rem;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
  margin: 0 10px;
}
.tui-checkbox:checked::after {
  content: "";
  top: 3px;
  left: 3px;
  position: absolute;
  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 6px;
  width: 10px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.sh2 {
  line-height: 22px;
  text-align: right;
  padding-right: 10px;
}
.sh1 {
  color: #666;
  font-size: 12px;
  line-height: 22px;
  display: inline-block;
}
.sh {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  line-height: 24px;
  display: inline-block;
  padding-left: 10px;
  margin-bottom: 10px;
}
.contain {
  margin-top: 54px;
}
.delete-button {
  height: 100%;
}
>>> .van-swipe-cell__wrapper {
  display: flex;
}
>>> .van-card {
  flex: 1;
}
.van-submit-bar {
  bottom: 0;
}
>>> .van-ellipsis {
  white-space: wrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      ischecked: false
    };
  },
  computed: {
    ...mapState("shoppingcar", {
      list: state => state.list,
      totalnum: state => state.totalnum
    }),
    ...mapGetters({
      price: "shoppingcar/price",
      selectnum: "shoppingcar/selectnum"
    })
  },
  watch: {
    "$store.state.shoppingcar.list": {
      deep: true,
      handler() {
        this.ischecked = this.$store.state.shoppingcar.list.every(
          item => item.ischecked
        );
      }
    }
  },
  methods: {
    ...mapActions("shoppingcar", ["innitlist", "dellist", "asynccalc"]),
    ...mapMutations("shoppingcar", ["getchangeall"]),
    ...mapMutations(["setUserid"]),
    changeall(e) {
      this.ischecked = e.target.checked;
      this.getchangeall(this.ischecked);
    },
    calc(id, goodsbuynum, num) {
      this.asynccalc({
        id,
        goodsbuynum,
        num
      });
      console.log(55555);
    },
    gotOrder() {
      if (this.list.some(item => item.ischecked)) {
        this.$router.push("/order");
        console.log(55555);
      } else {
        Toast("请选择商品");
      }
    },
    dell(id) {
      this.dellist(id);
    }
  },
  created() {
    let userinfo = localStorage.getItem("username");
    userinfo = JSON.parse(userinfo);
    let userid = userinfo.id;
    this.setUserid(userid);
    this.innitlist(userid);
    console.log(this.list);
  }
};
</script>
